import React, { Component } from 'react'

/*
 在 react 中没有插槽的叫法，但是我们可以通过属性或者标签嵌套的方式进行使用
 可以实现 vue 中插槽的功能
 props 可以传递字符串等基本类型以外
 还可以传递 函数，用于子传父
 也可以传递一个虚拟DOM 用于插槽写法
*/

class Header extends Component {
  render() {
    console.log(this);
    return <header>
      {this.props.children[0]}
      <h3>头部组件</h3>
      {this.props.children[1]}
    </header>
  }
}


function Content(props) {
  return (<>
    {props.left}
    <h1>内容组件 </h1>
    {props.right}
  </>)
}

export default class App extends Component {



  render() {
    return (
      <div>
        父级组件
        <hr />

        <Header>
          <span>你笑起来真好看</span>
          <span>真的很好看</span>
        </Header>

        <hr />

        <Content
          left={<span>锄禾日当午</span>}
          right={<span>汗滴禾下土</span>}
        ></Content>

      </div>
    )
  }
}
